<template>
  <div class="Tag">
    <span
      v-for="(item, index) in tag"
      :key="index"
      :class="{ active: currentIndex === index, static: currentIndex !== index }"
      @click="liClick(item, index)"
      >{{ item }}</span
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: -1,
      itemVal: "",
    };
  },
  props: ["tag"],
  created() {},
  methods: {
    liClick(item, index) {
      if (this.currentIndex != index) {
        this.currentIndex = index;
        this.itemVal = item;
      } else {
        this.currentIndex = 0;
        this.itemVal = this.tag[0];
      }
    },
  },
};
</script>

<style>
.active {
  display: inline-block;
  text-align: center;
  font-weight: 600;
  padding: 7px;
  margin-right: 20px;
  font-size: 20px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  background: #ffffff;
  color: #583fcf;
}

.static {
  display: inline-block;
  text-align: center;
  font-weight: 600;
  padding: 7px;
  margin-right: 20px;
  font-size: 20px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  color: #ffffff;
}

.Tag {
  padding: 15px 15px;
}

.Tag :hover {
  background: #ffffff;
  color: #583fcf;
  /* cursor: url(https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/Texto.cur), auto; */
}
</style>
